<template>
	<div id="visit_add" class="dialog animated"  :class="open? 'fadeIn':'fadeOut'"
		 v-show="show" :style="{visibility:(visible?'visible':'hidden')}">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				跟踪回访
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<div class="row row_1">
					<label class="label">孩子姓名：</label>
					<label class="value">
						{{clue.realName}}
						<div class="sex" :class="clue.gender==2? 'sex_girl' : ''"></div>
					</label>
					<label class="label">家长：</label>
					<label class="value">{{parentName}}</label>
					<label class="label">联系电话：</label>
					<label class="value">{{parentPhone}}</label>
				</div>
				<table class="table" cellspacing="0" v-show="visitList.length>0">
					<thead class="thead">
						<tr>
							<td style="width: 3rem;">沟通日期</td>
							<td style="width: 4rem;">沟通内容</td>
							<td style="width: 1.5rem;">跟进人</td>
							<td style="width: 1.5rem;">操作人</td>
							<td style="width: 1.5rem;">线索状态</td>
							<td style="width: 3rem;">下次沟通时间</td>
						</tr>
					</thead>
					<tbody class="tbody">
						<tr v-for="item in visitList">
		  					<td>{{item.visitTime}}</td>
		  					<td>{{item.visitContent}}</td>
		  					<td>{{item.executeUserName}}</td>
		  					<td>{{item.createUserName}}</td>
		  					<td>{{clueStatusMap[item.clueStatus]}}</td>
		  					<td>{{item.nextVisitTime}}</td>
		  				</tr>
					</tbody>
				</table>
				
				<div class="row row_2">
					<label class="must"></label>
					<label class="label">线索状态：</label>
					<el-select v-model="param.clueStatus" :disabled="true" class="input" placeholder="">
					    <el-option v-for="item in clueStatus" :key="item.value"
					      		   :label="item.name" :value="item.value">
					    </el-option>
					</el-select>
				</div>
				
				<div class="row row_3">
					<label class="must">*</label>
					<label class="label">沟通内容：</label>
					<el-input v-model="param.visitContent" id="visitContent" type="textarea" 
						style="width: 10.04rem;vertical-align: top;" maxLength="200"></el-input>
					<div class="clue_important" @click="checkImport()">
						<span class="checkbox" :class="param.isMatter==1? 'checkbox_active':''"></span>
						<span>重要线索</span>
					</div>
				</div>
				
				<div class="row row_4">
					<label class="label" style="width: 1.39rem;">下次沟通时间：</label>
					<el-date-picker v-model="param.nextVisitTime" value-format="yyyy-MM-dd" 
						class="input" type="date" :picker-options="pickerOptions">
				    </el-date-picker>
				</div>
				
			</div>
			
			<div class="btn_div">
				<div class="btn_sure" @click="sure()">确 认</div>
				<div class="btn_cancel" @click="cancel()">取 消</div>
			</div>
		</div>
	</div>
</template>

<script>
var vm,dict;
export default {
	data : function() {
		return {
			show : false,
			open : false,
			visible : false,
			param : {},
			clue :{},
			visitList : [],
			//数据字典
			clueStatus : null,
			clueStatusMap : {},
			intentionMap : null,
			today : new Date(),
			pickerOptions : {  //日期有效性计算
				disabledDate : function(date) {
					return date < vm.today;
				}
			},
		}
	},
	computed : {
		parentName : function() {
			return (vm.clue.parentData? vm.clue.parentData[0].parentName : null);
		},
		parentPhone : function() {
			return (vm.clue.parentData? vm.clue.parentData[0].phone : null);
		}
	},
	methods : {
		init : function(clue) {
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
			//初始化数据
			vm.clue = clue;
			vm.param = {
				clueId : clue.clueId,
				clueStatus : clue.clueStatus,
				visitContent : "",
				isMatter : clue.isMatter,
				nextVisitTime : "",
				_wait : ""
			};
			
			var now = tool.DateToString(new Date(), "yyyy-MM-dd")
			vm.today = new Date(now +" 00:00:00");
			
			api.visitByClue({clueId : clue.clueId}).then(function(data) {
				vm.visitList = data.data.visitList;
			})
		},
		cancel : function() {
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
			},500);
		},
		sure : function() {
			
			//验证规则
			var rules = [{
				judge : vm.param.visitContent,
				focus : $("#visit_add #visitContent"),
				tips : tips.blank
			}];
			if(!tool.validate(rules)) {
				return;
			}
			api.visitAdd(vm.param).then(function(data) {
				tool.message({ showClose: true, message: "添加跟踪回访成功", type: 'success' });
				vm.$emit('callback');
				vm.cancel();
			})
		},
		checkImport : function() {
			vm.param.isMatter = (vm.param.isMatter=="0"?  "1" : "0");
		}
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
		
		vm.clueStatus = dict["clue_status"];
		vm.clueStatusMap = tool.parseDict(dict["clue_status"]);
		vm.intentionMap = tool.parseDict(dict["intention_mode"]);
		
	}
}

</script>

<style lang="scss">
	#visit_add {
		.el-textarea__inner {
			border-radius: 0.08rem;
			height: 0.85rem;
			font-size: 0.16rem;
			font-family: "微软雅黑";
		}
	}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table.css"></style>
<style scoped>

	.form {
		padding: 0 0.3rem;
		color: #666666;
		font-size: 0.16rem;
	}
	
	.row {
		overflow: hidden;
	}
	.row_1 {
		margin-top: 0.1rem;
		margin-bottom: 0.2rem;
		padding-left: 0.15rem;
	}
	.row_2 {
		margin-top: 0.2rem;
	}
 	.row_3 {
 		margin-top: 0.1rem;
 	}
 	.row_4 {
 		margin-top: 0.15rem;
 	}
	.label {
		display: inline-block;
		min-width: 0.9rem;
		text-align: right;
		padding-right: 0.03rem;
	}
	.must {
		display: inline-block;
		position: relative;
		top: 0.02rem;
		width: 0.1rem;
		font-size: 0.16rem;
		color: red;
	}
	.value {
		display: inline-block;
		width: 2.3rem;
	}
	.sex {
		display: inline-block;
		position: relative;
		top: 0.03rem;
		width: 0.14rem;
		height: 0.18rem;
		background-image: url(../../../assets/img/clue_manage/boy.png);
		background-size: 100%;
	}
	.sex_girl {
		background-image: url(../../../assets/img/clue_manage/girl.png);
	}
	.checkbox {
		display: inline-block;
		position: relative;
		top: 0.02rem;
		margin-right: 0.05rem;
		width: 0.14rem;
		height: 0.14rem;
		background-image: url(../../../assets/img/clue_manage/check_no.png);
		background-size: 100%;
	}
	.checkbox_active {
		background-image: url(../../../assets/img/clue_manage/check_yes.png);
	}
	.clue_important {
		margin-top: 0.08rem;
		margin-left: 1.03rem;
		padding-left: 0.05rem;
		cursor: pointer;
	}
</style>